<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="app">

        <table border="1px" width="800px" >
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身份证</th>
                <th>住址</th>
            </tr>
            <tr v-for="student in Students" >
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.gender}}</td>
                <td>{{student.idcard}}</td>
                <td>{{student.address}}</td>
            </tr>
        </table>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        //创建Vue
        new Vue({
            el: '#app',
            data: {
                //数据
                Students: []
            },
            methods: {
                //连接后台，加载学生信息
                loadStudents() {
                    //调用axios方法 get\post\put\delete 向后台发出请求
                    axios.get('http://localhost:8080/findStudentAll')
                        .then(result => {
                            //成功
                           console.log(result.data);
                           if (result.data.data){
                               //绑定后台数据到前端模型中
                               this.Students = result.data.data;
                           }
                        })
                }
            },
            //组件挂载完成后调用加载学生
            mounted() {
                //调用方法
                this.loadStudents();
            }
         })
    </script>
</body>
</html>